<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简任务记录工具</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; padding: 20px; }
        #taskInput { width: 70%; padding: 10px; margin-right: 10px; }
        button { padding: 10px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; }
        ul { list-style-type: none; padding: 0; margin-top: 20px; }
        li { padding: 10px; background: #f9f9f9; margin-bottom: 5px; display: flex; justify-content: space-between; }
        .delete { color: red; cursor: pointer; }
    </style>
</head>
<body>
    <h2>极简任务记录</h2>
    <input type="text" id="taskInput" placeholder="输入新任务...">
    <button onclick="addTask()">添加任务</button>
    <ul id="taskList"></ul>

    <script>
        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const taskText = taskInput.value.trim();
            if (taskText === '') return;
            
            const li = document.createElement('li');
            li.innerHTML = `${taskText} <span class="delete" onclick="this.parentElement.remove()">×</span>`;
            document.getElementById('taskList').appendChild(li);
            
            taskInput.value = '';
            taskInput.focus();
        }
        
        document.getElementById('taskInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') addTask();
        });
    </script>
</body>
</html>